<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2. 影响 SVG 性能的 2 大要素</title>
    <style>
        canvas{
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>

     <svg width="512" height="512"></svg>

    <script type="module">
        
        function randomColor() {
        return `hsl(${Math.random() * 360}, 100%, 50%)`;
        }

        const root = document.querySelector('svg');
        const COUNT = 500;
        const WIDTH = 500;
        const HEIGHT = 500;

        function initCircles(count = COUNT) {
            for(let i = 0; i < count; i++) {
                const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
                root.appendChild(circle);
            }
            return [...root.querySelectorAll('circle')];
        }
        const circles = initCircles();

        function drawCircle(circle, radius = 10) {
            const x = Math.random() * WIDTH;
            const y = Math.random() * HEIGHT;
            const fillColor = randomColor();
            circle.setAttribute('cx', x);
            circle.setAttribute('cy', y);
            circle.setAttribute('r', radius);
            circle.setAttribute('fill', fillColor);
        }

        // 图形数量增多的时候，SVG 的帧率下降会更明显，因此，一般来说，
        // 在图形数量小于 1000 时，我们可以考虑使用 SVG，当图形数量大于 1000 但不超过 3000 时，我们考虑使用 Canvas2D。
        function draw() {
            for(let i = 0; i < COUNT; i++) {
                drawCircle(circles[i]);
            }
            requestAnimationFrame(draw);
        }

        draw();

    </script>
</body>
</html>